命名原則(Naming Rules)

元件命名_Component names

1. 大駝峰（PascalCase）
2. 全局元件註冊時，可以兼容使用橫線連接(kebab-case)
3. 元件名必須為多個單詞

Vue.component('MyComponent', {
...
})
// 全局元件註冊兼容橫線連接命名
Vue.component('my-component', {
...
})
export default {
    name: 'MyComponent'
}

元件檔案命名_Component File names

全部大駝峰（PascalCase），無底線，不能縮寫
或全部橫線連接（kebab-case），無底線，不能縮寫
Ex. TodoList.vue、todo-list.vue

元件在模版中的命名規則_Component name casing in templates

1.在single file components、string templates使用大駝峰（PascalCase），若沒有內容的元件應該是自閉合
2.在DOM templates 使用橫線連接(kebab-case)，且永遠不要使用自閉合/
3.或者全部使用橫線連接(kebab-case)，因為HTML對大小寫不敏感

<!-- In single file components, string templates -->
<MyComponent />
...
<!-- In DOM templates -->
<my-component></my-component>
...
<!-- In All templates -->
<my-component></my-component>

p.s:
1.single file components是指我們常見.vue檔，有<script>、<template>、<style>的單文件元件
2.string templates是指字符串的元件，如

Vue.component('AboutPage', {
  template: '<p>This is a about page</p>'
})

私有屬性，$_ 做為前綴命名_Private property names

在 plugin、mixin 中的私有屬性使用 $_ 做為前綴，同時，為了迴避和其它作者的衝突，再附帶一個命名空間(小駝峰)以迴避和其它作者的衝突
Ex. $_myNameSpace_updateData ()

使用prototype應用 $ 做為前綴命名_Prototype property names

官方建議 prototype 的命名最好冠上 $ 符號，原因是避免與組件內的方法名稱衝到，另外就是開發慣例(ex. this.$router, this.$store) 好讓所有使用者一眼就可以理解這就是 prototype！
Ex. this.$isDev()

基礎組件命名_Base component names

應用特定樣式和約定的基礎組件(也就是展示類的、無邏輯的或無狀態的組件)應該全部以一個特定的前綴開頭，比如Base、App或V
Ex. BaseButton.vue

單例組件名_Single-instance component names

對於每個頁面只會使用一次的組件只應該擁有單個活躍實例的組件，應該以 The 前綴命名，以示其唯一性，這些組件永遠不接受任何 props
Ex. TheHeader.vue

緊密耦合的組件_Tightly coupled component names

和父組件緊密耦合的子組件應該以父組件名作為前綴命名
Ex. components/
| - Searchbar.vue
| - SearchbarNavigation.vue

組件命名順序性_Order of words in component names

組件名應該以層次較高、較普遍的單詞開頭，以描述性的修飾詞結尾
Ex. components/
| - SearchButtonClear.vue
| - SearchButtonRun.vue
| - SearchInputQuery.vue

Props 命名_Props names

1.在聲明 props 的時候，其命名應該始終使用小駝峰(camelCase)
2.在模板（template）和 JSX 中應該始終使用橫線連接 (kebab-case)

props: {
  greetingText: String
}
...
<WelcomeMessage greeting-text="hi"/>

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang